<!--
 @description 经销商分店关店-详情数据
 @fileName DetailInfo.vue
 @author zengqiongying
 @created 2023-04-27 19:51:42
-->
<template>
  <div>
    <Card>
      <DealerCell :detail="dealerData" />
    </Card>
    <Card>
      <Cell
        title="是否需要其他业务客户经理接收知晓"
        :modelValue="detail.isOtherReceiveManagerKnow"
        default-value="--"
        readonly
        dict-type-code="BOOLEANS"
      />

      <template v-if="[1, '1'].includes(detail.isOtherReceiveManagerKnow)">
        <Cell title="接收客户经理" default-value="--" readonly :modelValue="detail.receiveManagerName" />
        <template v-if="!!detail.receiveManagerCode">
          <Cell :modelValue="detail.receiveManagerCode" title="接收客户经理编码" readonly />
          <Cell :modelValue="detail.receiveManagerTypeName" title="接收客户经理类型" readonly />
          <Cell :modelValue="detail.receiveManagerTel" title="接收客户经理电话" readonly />
        </template>
      </template>
      <Cell title="提报意见" is-column custom :right="false" :modelValue="detail.submitAnOpinion" readonly />
    </Card>
    <Card v-for="(item, i) in shopList" :key="i">
      <template #title>
        <div class="shop-title">
          {{ item.code }} <span>{{ item.name }}</span>
        </div>
      </template>
      <Cell title="详细地址" :modelValue="item.shopAddr" defaultValue="--" readonly custom />
      <Cell title="门店经营面积(㎡)" :modelValue="item.operateArea" defaultValue="--" readonly />
      <Cell title="门店经营业务类型" is-column custom readonly>
        <Tags :list="getBusinessTypeNames(item.businessTypeName)" />
      </Cell>
      <Cell title="是否关店" :modelValue="item.isChange === 1 ? '是' : '否'" default-value="--" readonly />
      <Cell
        title="关店原因"
        v-if="item.isChange === 1"
        :modelValue="item.closeReason"
        default-value="--"
        is-column
        custom
        divider
        :right="false"
      />
      <Cell
        title="门店是否交接"
        :modelValue="[1, '1'].includes(item.isMarketConnect) ? '是' : '否'"
        default-value="--"
        readonly
      />

      <Cell title="关店附件" is-column custom readonly>
        <AttachmentUpload v-model="item.ACCESS069List" :objectId="item.id" type-code="ACCESS069" readonly />
        <div v-if="item.ACCESS069List.length === 0">暂无附件</div>
      </Cell>
      <Cell title="交接证明附件" is-column custom readonly>
        <AttachmentUpload v-model="item.ACCESS070List" :objectId="item.id" type-code="ACCESS070" readonly />
        <div v-if="item.ACCESS070List.length === 0">暂无附件</div>
      </Cell>
    </Card>

    <Card title="门店建设信息">
      <ShopItem v-if="shopConstructDTOS.length > 0" :list="shopConstructDTOS" :dictData="dictData" readonly />
      <qmp-empty v-if="shopConstructDTOS.length === 0" description="暂无门店建设数据" image-size="60px" />
    </Card>

    <Card title="销售转让信息">
      <Cell
        title="是否涉及销售转让"
        :modelValue="detail.isTransferSales === 1 ? '是' : '否'"
        default-value="--"
        readonly
      />
      <Cell title="关系证明附件" is-column custom readonly>
        <AttachmentUpload :modelValue="attachment.ACCESS071" :objectId="id" type-code="ACCESS071" readonly />
        <div v-if="attachment.ACCESS071.length === 0" class="no-data-msg">暂无数据</div>
      </Cell>
      <Cell title="交接双方现场签订照片" is-column custom readonly>
        <AttachmentUpload v-model="attachment.ACCESS111" type-code="ACCESS111" :objectId="detail.id" readonly />
        <div v-if="attachment.ACCESS111.length === 0" class="no-data-msg">暂无数据</div>
      </Cell>
    </Card>

    <Card title="BPM审批信息">
      <Cell title="申请人" :modelValue="detail.createBy" default-value="--" readonly />
      <Cell
        title="申请时间"
        :modelValue="parseTime(detail.createTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      />
      <Cell title="BPM单号" :modelValue="detail.applyNo" default-value="--" readonly />
      <div v-for="(v, i) in detail.opinionDTOS" :key="i" class="group-box">
        <Cell title="步骤名" :modelValue="v.strStepName" default-value="--" custom readonly />
        <Cell title="操作时间" :modelValue="v.dtCreateDate" default-value="--" readonly />
        <Cell title="操作人" :modelValue="v.strApproverName" default-value="--" readonly />
        <Cell title="操作状态" :modelValue="v.strAction" default-value="--" readonly />
        <Cell title="意见留言" :modelValue="v.strComments" default-value="--" custom readonly />
      </div>
      <!-- <Cell
        title="审批结束时间"
        :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      />
      <Cell
        title="审批结果"
        :modelValue="detail.authorityReviewResult"
        dictTypeCode="REVIEW_RESULT"
        default-value="--"
        readonly
        custom
      />
      <Cell title="审批意见" :modelValue="detail.authorityReviewAdvice" default-value="--" readonly is-column custom />
      <Cell
        title="权限处理结束时间"
        :modelValue="parseTime(detail.authorityReviewTime, '{y}年{m}月{d}日')"
        default-value="--"
        readonly
      /> -->
    </Card>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, toRefs, reactive, watch } from 'vue'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import Tags from '@/components/Tags/index.vue'
  import DealerCell from '@/components/DealerCell/index.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import ShopItem from './ShopItem.vue'
  import { detail } from '@/apis/dealerMarketing/ShutUpShop'
  import { parseTime } from '@/utils'
  import { getDictList } from '@/apis/dataDict'

  interface anyObjectModle {
    [key: string]: any
  }
  export default defineComponent({
    name: 'ShutUpShopDetailInfo',
    components: { Card, Cell, Tags, DealerCell, ShopItem, AttachmentUpload },
    props: {
      id: {
        type: String,
        default: ''
      }
    },
    setup(props, ctx) {
      const datas = reactive<anyObjectModle>({
        dictData: {
          BELONG_STAGE: [],
          BOOLEANS: [],
          CTM_SHOP_CONS_DATA_PROCESS_TYPE: []
        },
        detail: {},
        attachment: {
          ACCESS071: [], // 关系证明附件
          ACCESS111: [] //交接现场签订照片
        },
        shopList: []
      })

      const dealerData = computed(() => {
        const d = { ...datas.detail }
        return {
          code: d.customerCode || '',
          name: d.customerName || '',
          officeCode: d.officeCode || '',
          officeName: d.officeName || '',
          createBy: d.createBy || ''
        }
      })
      const initDictData = async () => {
        const BELONG_STAGE = await getDictList('BELONG_STAGE')
        const BOOLEANS = await getDictList('BOOLEANS')
        const CTM_SHOP_CONS_DATA_PROCESS_TYPE = await getDictList('CTM_SHOP_CONS_DATA_PROCESS_TYPE')
        datas.dictData.BELONG_STAGE = BELONG_STAGE
        datas.dictData.BOOLEANS = BOOLEANS
        datas.dictData.CTM_SHOP_CONS_DATA_PROCESS_TYPE = CTM_SHOP_CONS_DATA_PROCESS_TYPE
      }

      const getDetail = () => {
        const id = `${props.id}`
        detail(id).then((res) => {
          datas.detail = res.data

          const list = datas.detail?.shopBusinessDTOS || []
          datas.shopList = list
            .filter((v: any) => v.isChange === 1)
            .map((v: any) => {
              return {
                ...v,
                ...{ ACCESS069List: [], ACCESS070List: [] }
              }
            })
          ctx.emit('data-change', res.data)
        })
      }
      const getBusinessTypeNames = (name: any) => {
        if (name) {
          return name.split(',')
        } else {
          return []
        }
      }
      // 门店建设
      const shopConstructDTOS = computed(() => {
        return datas.detail?.shopConstructDTOS || []
      })

      watch(
        () => props.id,
        () => {
          getDetail()
        },
        {
          immediate: true
        }
      )

      initDictData()

      return {
        ...toRefs(datas),
        dealerData,
        parseTime,
        getBusinessTypeNames,
        shopConstructDTOS
      }
    }
  })
</script>
<style lang="less" scoped>
  .shop-title {
    padding: 0 14px;
    font: var(--font-card-title);
    color: var(--texticon-color-brand-normal);
    span {
      margin-left: 10px;
    }
  }
  .account-list {
    padding: 0 16px;
    .radio {
      width: 24px;
      height: 24px;
      border: 1px solid;
    }
    /deep/ .qmp-checkbox__label {
      flex: 1;
    }
    .account-item {
      padding: 16px 0;
      .title {
        margin-bottom: 2px;
        display: flex;
        align-items: center;
        .tag {
          display: inline-block;
          padding: 2px 4px;
          background: var(--bg-focusing-brand);
          border-radius: ' 2px 2px 2px 2px';
          border: 1px solid var(--button-main-default);
          font: var(--font-point);
          color: var(--texticon-color-brand-normal);
          margin-right: 4px;
        }
        .code {
          font: var(--font-main-title-strengthen);
          color: var(--texticon-default-strong);
        }
        .state {
          flex: 1;
          font: var(--font-main-body);
          text-align: right;
        }
      }
      .address {
        font: var(--font-main-title-body);
        color: var(--texticon-default-strong);
      }
    }
  }
</style>
